<template>
  <div class="block" >
    <el-carousel height='600px'>
      <el-carousel-item>
        <div >
          <div class="btns">
            <el-button type="primary" @click='nowTag'>境外输入</el-button>
            <el-button type="primary" @click="allTag">治愈人数</el-button>
          </div>
          <Map :tag_1='tag' style="width:1000px; margin:0 auto;"></Map>
        </div>
      </el-carousel-item>
      <el-carousel-item>
        <div>
            <div id="bd" style="height:600px;width:1000px;margin:0 auto;"></div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }
  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
</style>


<script>
import { mapActions, mapGetters, mapState } from "vuex";
import Map from '@/components/Map'
export default {
    data() {
        return {
        obj: {
            page: 1,
            pageSize: 10,
        },
        tag:0
        };
    },
    components:{
        Map
    },
    computed: {
        ...mapState("dataList", ["dataList"]),
        ...mapState("article", ["article"]),
        ...mapGetters("dataList", [
        "confirmed",
        "suspected",
        "dead",
        "cure",
        "serve",
        "outside",
        ]),
    },
    created() {
        this.page_query(this.obj);
        this.page_query_article({page:1,pageSize:10});
    },
    mounted(){
        setTimeout(()=>{
          this.initEchart();
        },1000)
    },
    methods:{
        ...mapActions("dataList", ["page_query"]),
        ...mapActions("article", ["page_query_article"]),
        initEchart(){
            var myChart = echarts.init(document.getElementById('bd'));
            var option = {
                grid:{
                  left:'20%'
                },
                title: {
                    text: '疫情数据统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    // orient: 'vertical',
                    // top: 'middle',
                    bottom: 10,
                    left: 'center',
                    data: ['确诊', '疑似', '死亡', '治愈', '重症']
                },
                series: [
                    {
                        type: 'pie',
                        radius: '65%',
                        center: ['50%', '50%'],
                        selectedMode: 'single',
                        data: [
                            {value: this.confirmed, name: '确诊'},
                            {value: this.suspected, name: '疑似'},
                            {value: this.dead, name: '死亡'},
                            {value: this.cure, name: '治愈'},
                            {value: this.serve, name: '重症'},
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ],
            };
            myChart.setOption(option);
        },
                        nowTag() {
                    this.tag = 0;
                },
                allTag() {
                    this.tag = 1;
                }
    }
}
</script>




